<template>
  <!-- 公共头 -->
  <header id="header">
    <section class="container">
      <h1 id="logo">
        <a href="/" title="霍森学院">
          <img src="~/assets/img/text_logo.png" width="100%" alt="霍森学院">
        </a>
      </h1>
      <div class="h-r-nsl">
        <ul class="nav">
          <!--          <router-link to="/" tag="li" active-class="current" exact>-->
          <!--            <a>首页</a>-->
          <!--          </router-link>-->
          <router-link to="/course" tag="li" active-class="current">
            <a>
              <svg-icon icon-class="board" style="margin-right: 5px"></svg-icon>
              课程
            </a>
          </router-link>
          <router-link to="/teacher" tag="li" active-class="current">
            <a>
              <svg-icon icon-class="teacher" style="margin-right: 5px"></svg-icon>
              讲师
            </a>
          </router-link>
          <!--          <router-link to="/article" tag="li" active-class="current">-->
          <!--            <a>文章</a>-->
          <!--          </router-link>-->
          <!--          <router-link to="/question" tag="li" active-class="current">-->
          <!--            <a>问答</a>-->
          <!--          </router-link>-->
        </ul>
        <!-- nav -->
        <ul class="h-r-login">
          <li v-if="!memberInfo" id="no-login">
            <svg-icon icon-class="user"/>
            <a href="/login" title="登录">
              <span class="vam ml5">登录</span>
            </a>
            |
            <a href="/register" title="注册">
              <span class="vam ml5">注册</span>
            </a>
          </li>
          <li v-if="memberInfo" id="is-login-two" class="h-r-user">
            <a href="" title>
              <img
                :src="memberInfo.avatar"
                width="30"
                height="30"
                class="vam picImg"
                alt
              >
              <span id="userName" class="vam disIb">{{ memberInfo.name }}</span>
            </a>
            <a href="javascript:void(0)" title="退出" class="ml5" @click="logout()">退出</a>
          </li>
        </ul>
        <aside class="h-r-search">
          <label class="h-r-s-box">
            <input type="text" placeholder="搜索课程" v-model="courseTitle" @keyup.enter="queryByTitle()">
            <button class="s-btn" @click="queryByTitle()">
              <em class="icon18">&nbsp;</em>
            </button>
          </label>
        </aside>
      </div>
      <aside class="mw-nav-btn">
        <div class="mw-nav-icon"/>
      </aside>
      <div class="clear"/>
    </section>
  </header>
</template>

<script>
import loginApi from '~/api/login'
import cookie from 'js-cookie'

export default {
  data() {
    return {
      memberInfo: null,
      courseTitle: ''
    }
  },
  // 登录成功后获取用户信息
  // 页面渲染之前执行：尚未有window对象
  created() {
    this.getInfo()
  },
  // // 页面渲染之后执行：可以有window对象
  // mounted() {
  //   const token = this.$route.query.token
  //   if (token) {
  //     // 将jwt写入cookie
  //     cookie.set('hsedu_jwt_token', token, { domain: 'localhost' })
  //     window.location.href = '/'
  //   }
  // },
  methods: {
    queryByTitle() {
      window.location = 'course?courseTitle=' + this.courseTitle
    },
    getInfo() {
      // 如果cookie中的token值不存在，则无需获取用户信息
      if (!cookie.get('hsedu_jwt_token')) {
        return
      }
      // 如果token存在，则携带token的值向服务器发起请求
      loginApi.getInfo().then(response => {
        // 渲染页面
        this.memberInfo = response.data.memberInfo
      })
    },
    // 登出
    logout() {
      // 清除cookie
      cookie.set('hsedu_jwt_token', '', { domain: 'localhost' })
      // 跳转页面
      window.location.href = '/'
    }
  }
}
</script>
